import React, { Component, Fragment } from 'react'
import axiso from 'axios'
import './style.css'
import XiaojjItem from './XiaojjItem'
import Boss from './Boss'
import {CSSTransition, TransitionGroup } from 'react-transition-group'

class Xiaojj extends Component {
    constructor(props) {
        super(props)
        this.state = {
            inputValue: '',
            list: ['头部按模', '精油推背'],
        }
    }

    // componentWillMount(){
    //     console.log('componentWillMount----组件将要挂载到页面的时刻')
    // }

    componentDidMount () {
        // console.log('componentDidMount----组件挂载完成的时刻执行')
        // axiso.post('https://web-api.juejin.im/v3/web/wbbr/bgeda')
        //     .then(res => {
        //         console.log(res)
        //     }).catch(err => {
        //         console.log(err)
        //     })
    }

    // shouldComponentUpdate (nextProps, nextState) {
    //     // console.log(nextProps)
    //     // console.log(nextState)

    //     // console.log('shouldComponentUpdate --- 组件发生改变前执行')
    //     if (nextProps.inputValue !== this.state.list) {
    //         return true
    //     } else {
    //         return false
    //     }
    // }

    // componentWillUpdate () {
    //     console.log('componentWillUpdate -- 组件更新之前， shouldComponentUpdate函数之后执行')
    // }

    // componentDidUpdate () {
    //     console.log('componentDidUpdate -- 组件更新之后执行')
    // }

    render() {
        // console.log('render --- 组件挂载中---')
        return (
            //  flex布局 不能使用div包裹起来，就用 Fragment 代替
            <Fragment>
                {/* 
                    在 jsx 中添加注释的写法 

                    htmlFor 默认把焦点放入id为它对应的 input
                */}
                <div>
                    <label htmlFor="myInput">增加服务：</label>
                    <input id="myInput" className="input" value={this.state.inputValue} onChange={this.inputChange.bind(this)}/> 
                    <button onClick={this.addList.bind(this)}>增加服务</button>

                    {/* <label htmlFor="myInput">增加服务2：</label>
                    <input id="myInput" className="input" value={this.state.inputValue} onChange={this.inputChange2.bind(this)} ref={(input) => {this.input = input}}/> 
                    <button onClick={this.addList.bind(this)}>增加服务2</button> */}
                </div>
                <ul ref={ul => {this.ul = ul}}>
                    <TransitionGroup>
                    {
                       /* // this.state.list.map((item) => 
                        //     <li>{item}</li>
                        // )
                       */

                        // this.state.list.map((item,index) =>{
                        //     return <li key={index+item}>{item}</li>
                        // })


                            // this.state.list.map((item,index) =>{
                            //     return (
                            //         /**
                            //          * 渲染标签属性
                            //          * <h1> 测试文字 </h1>
                            //          * dangerouslySetInnerHTML={{__html:item}}
                            //         */
    
                            //         <li key={index+item}
                            //             onClick={this.delItem.bind(this,index)}
                            //             dangerouslySetInnerHTML={{__html:item}}
                            //         >
                            //             {/* {item} */}
                            //         </li>
    
                            //         )
                            //     })

                            <CSSTransition
                                timeout={2000}          //动画持续时间
                                classNames="boss"       //className值，防止重复
                                unmountOnExit           // 删除 DOM
                                appear={true}           // 出现时有动画效果
                            >
                                <XiaojjItem list={this.state.list} username='管理员' delItem={this.delItem.bind(this)}/>
                            </CSSTransition>
                    }
                    </TransitionGroup>
                </ul>
                <Boss />
            </Fragment>
        )
    }

    inputChange (e) {
        this.setState ({
            inputValue : e.target.value
        })
    }

    inputChange2 () {
        this.setState ({
            inputValue : this.input.value
        })
    }

    addList () {
        this.setState({
            list:[...this.state.list, this.state.inputValue],
            inputValue:""
        }, () => { // 回调函数
            console.log(this.ul.querySelectorAll('li').length)
        })

    }

    delItem (index) {
        console.log("---------------" + index)
        let list = this.state.list;
        console.log(list)
        list.splice(index,1)
        console.log(list)

        this.setState({
            list:list
        })
    }

}

export default Xiaojj